<template>
  <div>
    <div class="top-search">
      <div class="top-app">校搜</div>
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索的新闻"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="news">
      <div class="news-msg" v-for="(item, index) in neswmsg" :key="index">
        <div>
          <router-link :to="item.id">
            <h2 class="news-msg-title">{{ item.title }}</h2>
            <div class="news-msg-img">
              <img :src="item.src1" />
              <img :src="item.src2" />
              <img :src="item.src3" />
            </div>
          </router-link>
        </div>
      </div>
      <!-- <img :src="src.src" alt=""> -->
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      value: "",
      // src:{src: require("../assets/images/news1.webp")}
      neswmsg: [],
    };
  },
  methods: {
    //点击搜索新闻
    onSearch() {
      let value = this.value;
      let title = { title: value };
      if (value == "") {
        this.dataMes();
      } else {
        this.neswmsg = [];
        axios
          .post("http://127.0.0.1/list/searchnews", title, {
            headers: "application/x-www-form-urlencoded",
          })
          .then((res) => {
            let { data } = res;
            if (data.code == 200) {
              let mes = data.data;
              console.log(mes);
              this.dealwithMes(mes);
            } else if (data.code == -1) {
              console.log("查询失败");
            }
          });
      }
    },
    //初始化新闻
    dataMes() {
      axios
        .get("http://127.0.0.1/news")
        .then((res) => {
          console.log(res.data);
          this.dealwithMes(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //处理获得新闻的数据
    dealwithMes(mes) {
      let base = "/news?id=";
      let src1 = require("../assets/images/news1.webp");
      let src2 = require("../assets/images/news2.webp");
      let src3 = require("../assets/images/news3.webp");
      let data = {};
      for (var i = 0; i < mes.length; i++) {
        let id = base + mes[i].id;
        let title = mes[i].title;
        data = { src1, src2, src3, title, id };
        this.neswmsg.push(data);
      }
      console.log(this.neswmsg);
    },
  },
  mounted() {
    this.dataMes();
  },
};
</script>
<style lang="less" scoped>
.top-search {
  position: fixed;
  top: 0;
  display: flex;
  background: linear-gradient(to left, #29eac4, #4284db);
  justify-content: center;
  width: 100%;
  // border-bottom-right-radius: 10px;
  // border-bottom-left-radius: 10px;
  .top-app {
    color: white;
    font-size: 24px;
    line-height: 54px;
    margin-left: 10px;
  }
}
.news {
  margin-top: 60px;
  margin-bottom: 74px;
  .news-msg {
    margin: 10px auto;
    width: 90vw;
    background-color: white;
    border-radius: 10px;
    .news-msg-title {
      text-align: left;
      margin-left: 10px;
      padding-top: 20px;
      margin-bottom: 10px;
      font-size: 20px;
      line-height: 20px;
    }
    .news-msg-img {
      display: flex;
      justify-content: space-around;
      padding-bottom: 10px;
      img {
        width: 28vw;
        height: 20vw;
        border-radius: 5px;
      }
    }
  }
}
</style>
<style lang="less">
.van-search {
  background: transparent;
  width: 80vw;
}
h2 {
  margin: 0;
  padding: 0;
}
a {
  color: #000;
}
.van-search__action {
  background-color: white;
  margin-left: -2px;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}
.van-search__content {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}
</style>